import React from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Card, 
  Row, 
  Col, 
  Typography, 
  Button, 
  Statistic,
  Divider,
  Tag,
  Alert
} from 'antd';
import {
  BarChartOutlined,
  CalculatorOutlined,
  TrophyOutlined,
  RightOutlined,
  DollarOutlined,
  LineChartOutlined,
  SafetyOutlined,
  BulbOutlined
} from '@ant-design/icons';
import './index.less';

const { Title, Paragraph, Text } = Typography;

interface FeatureCard {
  title: string;
  description: string;
  icon: React.ReactNode;
  path: string;
  color: string;
  features: string[];
}

const Home: React.FC = () => {
  const navigate = useNavigate();

  const featureCards: FeatureCard[] = [
    {
      title: '盈利情况计算',
      description: '专业的股票投资盈亏分析工具，支持多股票组合管理和实时盈亏计算',
      icon: <BarChartOutlined />,
      path: '/',
      color: '#1890ff',
      features: ['股票组合管理', '实时盈亏计算', '交易记录追踪', '风险分析']
    },
    {
      title: '公募基金投资计划',
      description: '基于历史回撤数据的智能基金投资策略，制定科学的分批买入计划',
      icon: <CalculatorOutlined />,
      path: '/fund-plan',
      color: '#52c41a',
      features: ['基金搜索', '分批投资策略', '风险评估', '计划导出']
    },
    {
      title: '证券投资计划',
      description: '专业的证券投资计划生成器，支持多种投资策略和风险控制',
      icon: <TrophyOutlined />,
      path: '/stock-plan',
      color: '#fa8c16',
      features: ['多种投资策略', '风险控制', '成本优化', '收益预测']
    }
  ];

  const handleNavigate = (path: string) => {
    navigate(path);
  };

  return (
    <div className="home-page">
      {/* 欢迎区域 */}
      <div className="welcome-section">
        <Row justify="center">
          <Col xs={24} md={20} lg={16}>
            <div className="welcome-content">
              <Title level={1} className="welcome-title">
                <DollarOutlined className="title-icon" />
                理财投资工具助手
              </Title>
              <Paragraph className="welcome-description">
                专业的投资理财工具集合，帮助您进行科学的投资决策和风险管理。
                支持股票盈亏分析、基金投资计划制定、证券投资策略优化等功能。
              </Paragraph>
              
              <Row gutter={[16, 16]} className="stats-row">
                <Col xs={12} sm={6}>
                  <Statistic
                    title="支持工具"
                    value={3}
                    suffix="个"
                    valueStyle={{ color: '#1890ff' }}
                  />
                </Col>
                <Col xs={12} sm={6}>
                  <Statistic
                    title="投资策略"
                    value={3}
                    suffix="种"
                    valueStyle={{ color: '#52c41a' }}
                  />
                </Col>
                <Col xs={12} sm={6}>
                  <Statistic
                    title="风险控制"
                    value="智能"
                    valueStyle={{ color: '#fa8c16' }}
                  />
                </Col>
                <Col xs={12} sm={6}>
                  <Statistic
                    title="数据安全"
                    value="本地"
                    valueStyle={{ color: '#722ed1' }}
                  />
                </Col>
              </Row>
            </div>
          </Col>
        </Row>
      </div>

      <Divider />

      {/* 功能卡片区域 */}
      <div className="features-section">
        <Title level={2} style={{ textAlign: 'center', marginBottom: 40 }}>
          <BulbOutlined /> 核心功能
        </Title>
        
        <Row gutter={[24, 24]}>
          {featureCards.map((card, index) => (
            <Col xs={24} lg={8} key={index}>
              <Card
                className="feature-card"
                hoverable
                actions={[
                  <Button 
                    type="primary" 
                    icon={<RightOutlined />}
                    onClick={() => handleNavigate(card.path)}
                    style={{ backgroundColor: card.color, borderColor: card.color }}
                  >
                    立即使用
                  </Button>
                ]}
              >
                <div className="card-header">
                  <div 
                    className="card-icon"
                    style={{ backgroundColor: `${card.color}15`, color: card.color }}
                  >
                    {card.icon}
                  </div>
                  <Title level={4} style={{ margin: 0 }}>
                    {card.title}
                  </Title>
                </div>
                
                <Paragraph className="card-description">
                  {card.description}
                </Paragraph>
                
                <div className="card-features">
                  <Text strong>主要功能：</Text>
                  <div style={{ marginTop: 8 }}>
                    {card.features.map((feature, idx) => (
                      <Tag key={idx} color={card.color} style={{ margin: '2px 4px 2px 0' }}>
                        {feature}
                      </Tag>
                    ))}
                  </div>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      <Divider />

      {/* 特色功能区域 */}
      <div className="highlights-section">
        <Title level={2} style={{ textAlign: 'center', marginBottom: 40 }}>
          <SafetyOutlined /> 产品特色
        </Title>
        
        <Row gutter={[24, 24]}>
          <Col xs={24} md={12} lg={6}>
            <Card size="small" className="highlight-card">
              <div className="highlight-icon">
                <LineChartOutlined style={{ fontSize: 32, color: '#1890ff' }} />
              </div>
              <Title level={4}>专业分析</Title>
              <Paragraph>
                基于历史数据和专业算法，提供科学的投资分析和建议
              </Paragraph>
            </Card>
          </Col>
          
          <Col xs={24} md={12} lg={6}>
            <Card size="small" className="highlight-card">
              <div className="highlight-icon">
                <SafetyOutlined style={{ fontSize: 32, color: '#52c41a' }} />
              </div>
              <Title level={4}>数据安全</Title>
              <Paragraph>
                所有数据本地存储，保护您的隐私和投资信息安全
              </Paragraph>
            </Card>
          </Col>
          
          <Col xs={24} md={12} lg={6}>
            <Card size="small" className="highlight-card">
              <div className="highlight-icon">
                <CalculatorOutlined style={{ fontSize: 32, color: '#fa8c16' }} />
              </div>
              <Title level={4}>智能计算</Title>
              <Paragraph>
                自动化的投资计算和风险评估，减少人为错误
              </Paragraph>
            </Card>
          </Col>
          
          <Col xs={24} md={12} lg={6}>
            <Card size="small" className="highlight-card">
              <div className="highlight-icon">
                <TrophyOutlined style={{ fontSize: 32, color: '#722ed1' }} />
              </div>
              <Title level={4}>策略优化</Title>
              <Paragraph>
                多种投资策略选择，帮助您优化投资组合配置
              </Paragraph>
            </Card>
          </Col>
        </Row>
      </div>

      <Divider />

      {/* 使用提示 */}
      <div className="tips-section">
        <Alert
          message="使用提示"
          description={
            <div>
              <p><strong>新用户建议：</strong></p>
              <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
                <li>首次使用建议从"盈利情况计算"开始，了解基本功能</li>
                <li>投资计划功能需要准确的历史数据，建议仔细填写</li>
                <li>所有数据均保存在本地，清除浏览器数据会丢失记录</li>
                <li>定期导出重要的投资计划和数据作为备份</li>
              </ul>
            </div>
          }
          type="info"
          showIcon
          style={{ marginBottom: 24 }}
        />
      </div>
    </div>
  );
};

export default Home;